<template>
	<div class="base-form">
		<template v-if="step === 1">
			<h3 class="h3-before">房屋基础信息</h3>
			<van-field
				v-model="formData.jzrks"
				label="1.总居住人数(人)"
				placeholder="请输入"
				required
				type="digit"
				:rules="validator.number1to100"
			/>
			<van-field
				v-model="formData.zzrs"
				label="2.租住人数(人)"
				placeholder="请输入"
				required
				type="digit"
				:rules="validator.number2"
			/>
			<van-field
				v-model="formData.cs"
				label="3.房屋层数(层)"
				placeholder="请输入"
				required
				@input="onStoreyInput"
				type="digit"
				:rules="validator.number1to7"
			/>
			<van-field
				v-model="formData.fjsl"
				label="4.房间数量(个)"
				type="digit"
				placeholder="请输入"
				required
				:rules="validator.number1to100"
			/>
			<van-field
				v-model="formData.jzfjs"
				label="5.出租房间数量(个)"
				placeholder="请输入"
				required
				type="digit"
				:rules="validator.number5"
			/>
			<van-field
				v-model="formData.bdfwjzrydddzxcsl"
				label="6.本房屋居住人员的电动自行车数量"
				placeholder="请输入"
				required
				type="digit"
				:rules="validator.number"
			/>
			<van-field
				class="field-column"
				label="7.充电方式"
				required
				placeholder="请选择"
				:rules="validator.business"
			>
				<template #input>
					<van-checkbox-group v-model="formData.cdfs" direction="horizontal">
						<van-checkbox
							v-for="item in echoData.recharge"
							:name="item"
							:key="item"
							shape="square"
						>
							{{ item }}
						</van-checkbox>
					</van-checkbox-group>
				</template>
			</van-field>
			<van-field
				v-if="formData.cdfs?.includes('其他')"
				v-model="formData.cdfsqtbz"
				label="其他充电方式"
				class="field-textarea field-column"
				placeholder="请输入"
				required
				type="textarea"
				:rules="validator.desc"
			/>
			<van-field
				v-model="formData.czryrs"
				label="8.出租人员从事外卖、闪送、代驾等职业的人数"
				placeholder="请输入"
				required
				type="digit"
				:rules="validator.number1to100"
			/>
			<van-field
				v-model="formData.cjzwqtjyyt"
				label="9.除居住外是否存在其他经营业态"
				placeholder="请选择"
				required
				:rules="validator.boolean"
			>
				<template #input>
					<van-radio-group v-model="formData.cjzwqtjyyt" direction="horizontal">
						<van-radio
							v-for="item in echoData.boolean"
							:name="item.value"
							:key="item.value"
						>
							{{ item.label }}
						</van-radio>
					</van-radio-group>
				</template>
			</van-field>
			<van-field
				v-if="+formData.cjzwqtjyyt === 1"
				class="field-column"
				placeholder="请选择"
				:rules="validator.business"
			>
				<template #input>
					<van-checkbox-group v-model="formData.cjzwqtjyytmsg" direction="horizontal">
						<van-checkbox
							v-for="item in echoData.business"
							:name="item"
							:key="item"
							shape="square"
						>
							{{ item }}
						</van-checkbox>
					</van-checkbox-group>
				</template>
			</van-field>
		</template>

		<template v-if="step === 2">
			<h3 class="h3-before">安全疏散</h3>
			<van-field
				v-model="formData.jzscmj"
				label="1.房屋建筑面积(平方米)"
				placeholder="请输入"
				required
				type="number"
				:rules="validator.number"
			/>
			<van-field
				v-model="formData.jzscxyaqcksl"
				label="2.房屋首层现有安全出口的数量(个)"
				placeholder="请输入"
				required
        type="digit"
				:rules="validator.number1to10"
			/>
			<van-field
				v-model="formData.jzxyssltsl"
				label="3.房屋现有疏散楼梯的数量(个)"
				placeholder="请输入"
				required
        type="digit"
				:rules="validator.number1to10"
			/>
			<van-field
				v-model="formData.ckfhwggptzlsl"
				label="4.窗口防护网、广告牌、铁栅栏数量(个)"
				placeholder="请输入"
				required
				type="digit"
				:rules="validator.number1to100"
			/>
			<van-field
				v-model="formData.sfszsszsbzhaqckbz"
				label="5.是否设置疏散指示标志和安全出口标志"
				placeholder="请选择"
				required
				:rules="validator.boolean"
			>
				<template #input>
					<van-radio-group v-model="formData.sfszsszsbzhaqckbz" direction="horizontal">
						<van-radio
							v-for="item in echoData.boolean"
							:name="item.value"
							:key="item.value"
						>
							{{ item.label }}
						</van-radio>
					</van-radio-group>
				</template>
			</van-field>
			<template v-if="echoData.storeyCount >= 2">
				<van-field
					v-model="formData.sfazfztsss"
					label="6.是否安装软梯逃生绳等辅助逃生设施"
					placeholder="请选择"
					required
					:rules="validator.boolean"
				>
					<template #input>
						<van-radio-group v-model="formData.sfazfztsss" direction="horizontal">
							<van-radio
								v-for="item in echoData.boolean"
								:name="item.value"
								:key="item.value"
							>
								{{ item.label }}
							</van-radio>
						</van-radio-group>
					</template>
				</van-field>
				<van-field
					v-model="formData.ywgdlttxwd"
					label="7.楼内有无固定楼梯通向屋顶或室外平台"
					placeholder="请选择"
					required
					:rules="validator.boolean"
				>
					<template #input>
						<van-radio-group v-model="formData.ywgdlttxwd" direction="horizontal">
							<van-radio
								v-for="item in echoData.haveOrNot"
								:name="item.value"
								:key="item.value"
							>
								{{ item.label }}
							</van-radio>
						</van-radio-group>
					</template>
				</van-field>
			</template>
			<van-field
				:label="echoData.storeyCount >= 2 ? '8.是否按标准建设疏散通道' : '6.是否按标准建设疏散通道'"
				placeholder="请选择"
				required
				:rules="validator.boolean1"
			>
				<template #input>
					<van-radio-group v-model="formData.jsrysstd" :disabled="+formData.cs === 1" direction="horizontal" @click="onBuildClick">
						<van-radio
							v-for="item in echoData.exit"
							:name="item.value"
							:key="item.value"
							:disabled="item.disabled"
						>
							{{ item.label }}
						</van-radio>
					</van-radio-group>
				</template>
			</van-field>
			 <van-field
        class="field-column"
        :rules="validator.image"
      >
        <template #input>
          <component :is="upload" :limit="5" v-model="formData.sfmzstdPhoto" />
        </template>
      </van-field>
      <van-field
				v-if="formData.jsrysstd==='否'"
				v-model="formData.sfmzstdMsg"
				label="隐患描述"
				class="field-textarea field-column"
				placeholder="请输入"
				type="textarea"
			/>
		</template>

		<template v-if="step === 3">
			<h3 class="h3-before">设施器材</h3>
			<van-field
				v-model="formData.mhqsl"
				label="1.灭火器数量(个)"
				placeholder="请输入"
				required
				type="digit"
				:rules="validator.number"
			/>
			<van-field
				v-model="formData.fytsmz"
				label="2.防烟逃生面罩数量(套)"
				placeholder="请输入"
				required
				type="digit"
				:rules="validator.number"
			/>
			<van-field
				v-model="formData.jzsyjyplmhxts"
				label="3.房屋简易消防喷头数量(个)"
				placeholder="请输入"
				required
				type="digit"
				:rules="validator.number"
			/>
			<van-field
				v-model="formData.jzszlwxdlgybjqs"
				label="4.房屋烟感报警器数量(个)"
				placeholder="请输入"
				required
				type="digit"
				:rules="validator.number"
			/>
		</template>

		<template v-if="step === 4">
			<h3 class="h3-before">其他</h3>
			<van-field
				v-model="formData.xggdjsbp"
				label="1.悬挂固定警示标牌数量(张)"
				placeholder="请输入"
				required
				type="digit"
				:rules="validator.number"
			/>
			<van-field
				v-model="formData.wdwhjgfjgqsyyrkrgbdj"
				label="2.是否存在夹芯彩钢板出租住人"
				placeholder="请选择"
				required
				:rules="validator.boolean"
			>
				<template #input>
					<van-radio-group v-model="formData.wdwhjgfjgqsyyrkrgbdj" direction="horizontal">
						<van-radio
							v-for="item in echoData.boolean"
							:name="item.value"
							:key="item.value"
						>
							{{ item.label }}
						</van-radio>
					</van-radio-group>
				</template>
			</van-field>
      <!-- 是否存在夹芯彩钢板出租住人 选择是 加照片 -->
      <van-field
        v-if="formData.wdwhjgfjgqsyyrkrgbdj === '1'"
        class="field-column"
        :rules="validator.image"
      >
        <template #input>
          <component :is="upload" :limit="5" v-model="formData.sfczjxgbczzrPhoto" />
        </template>
      </van-field>
      <!-- 是否存在夹芯彩钢板出租住人 选择是 加描述 -->
      <van-field
				v-if="formData.wdwhjgfjgqsyyrkrgbdj === '1'"
				v-model="formData.sfczjxgbczzrMsg"
				label="隐患描述："
				class="field-textarea field-column"
				placeholder="请输入"
				type="textarea"
			/>
			<van-field
				v-model="formData.sstdsyyrkrclzx"
				label="3.疏散通道使用易燃可燃材料装修"
				placeholder="请选择"
				required
				:rules="validator.boolean"
			>
				<template #input>
					<van-radio-group v-model="formData.sstdsyyrkrclzx" direction="horizontal">
						<van-radio
							v-for="item in echoData.boolean"
							:name="item.value"
							:key="item.value"
						>
							{{ item.label }}
						</van-radio>
					</van-radio-group>
				</template>
			</van-field>
      <!-- 疏散通道使用易燃可燃材料装修 选择是 加照片 -->
      <van-field
        v-if="formData.sstdsyyrkrclzx === '1'"
        class="field-column"
        :rules="validator.image"
      >
        <template #input>
          <component :is="upload" :limit="5" v-model="formData.sstdsyyrkrclzxPhoto" />
        </template>
      </van-field>
      <!-- 疏散通道使用易燃可燃材料装修 选择是 加描述 -->
      <van-field
				v-if="formData.sstdsyyrkrclzx === '1'"
				v-model="formData.sstdsyyrkrclzxMsg"
				label="隐患描述"
				class="field-textarea field-column"
				placeholder="请输入"
				type="textarea"
			/>
			<van-field
				v-model="formData.gryssdcsszblyyqksddp"
				label="4.供人员疏散的场院、内院、天井设置不利于烟气扩散的顶棚、雨棚等"
				placeholder="请选择"
				required
				:rules="validator.boolean"
			>
				<template #input>
					<van-radio-group v-model="formData.gryssdcsszblyyqksddp" direction="horizontal">
						<van-radio
							v-for="item in echoData.boolean"
							:name="item.value"
							:key="item.value"
						>
							{{ item.label }}
						</van-radio>
					</van-radio-group>
				</template>
			</van-field>
      <!--供人员疏散的场院、内院、天井设置不利于烟气扩散的顶棚、雨棚等 选择是 加照片 -->
      <van-field
        v-if="formData.gryssdcsszblyyqksddp === '1'"
        class="field-column"
        :rules="validator.image"
      >
        <template #input>
          <component :is="upload" :limit="5" v-model="formData.gryssdcsszblyyqksddpPhoto" />
        </template>
      </van-field>
      <van-field
				v-if="formData.gryssdcsszblyyqksddp === '1'"
				v-model="formData.gryssdcsszblyyqksddpMsg"
				label="隐患描述"
				class="field-textarea field-column"
				placeholder="请输入"
				type="textarea"
			/>
			<van-field
				v-model="formData.fwyfwdddzxccdsssfayqjshsf"
				label="5.服务于房屋的电动自行车充电设施是否按要求建设"
				placeholder="请选择"
				required
				:rules="validator.boolean"
			>
				<template #input>
					<van-radio-group v-model="formData.fwyfwdddzxccdsssfayqjshsf" direction="horizontal">
						<van-radio
							v-for="item in echoData.boolean2"
							:name="item.value"
							:key="item.value"
						>
							{{ item.label }}
						</van-radio>
					</van-radio-group>
				</template>
			</van-field>
      <!-- 服务于房屋的电动自行车充电设施是否按要求建设 选择是 加照片 -->
      <van-field
        v-if="formData.fwyfwdddzxccdsssfayqjshsf === '0'"
        class="field-column"
        :rules="validator.image"
      >
        <template #input>
          <component :is="upload" :limit="5" v-model="formData.fwyfwdddzxccdsssfayqjshsfPhoto" />
        </template>
      </van-field>
      <van-field
				v-if="formData.fwyfwdddzxccdsssfayqjshsf === '0'"
				v-model="formData.fwyfwdddzxccdsssfayqjshsfMsg"
				label="隐患描述:"
				class="field-textarea field-column"
				placeholder="请输入"
				type="textarea"
			/>
		</template>
	</div>
</template>

<script setup>
import { reactive, defineProps, watch, computed } from 'vue'
import upload from '@/components/upload'
import { useLoginStore } from '@/store'
import { storeToRefs } from 'pinia'
const loginStore = useLoginStore()
const { loginInfo } = storeToRefs(loginStore)

const props = defineProps({
	formData: {
		type: Object,
		default: () => {}
	},
	initData: {
		type: Object,
		default: () => {}
	},
	step: {
		type: Number,
		default: 1
	}
})

const validateMax100 = (val) =>
  new Promise((resolve) => {
    if (val <= 500) {
      resolve(true)
    } else {
      resolve(false)
    }
  })
const validateMax10 = (val) =>
  new Promise((resolve) => {
    if (val <= 10) {
      resolve(true)
    } else {
      resolve(false)
    }
  })
const validateMax7 = (val) =>
  new Promise((resolve) => {
    if (val <= 7) {
      resolve(true)
    } else {
      resolve(false)
    }
  })
const validateImage = (val) =>
  new Promise((resolve) => {
    if (val?.length >= 2 && val?.length <= 5) {
      resolve(true)
    } else {
      resolve(false)
    }
  })
const validateDep1 = (val) =>
  new Promise((resolve) => {
    if (+val <= +props.formData.jzrks) {
      resolve(true)
    } else {
      resolve(false)
    }
  })
const validateDep4 = (val) =>
  new Promise((resolve) => {
    if (+val <= +props.formData.fjsl) {
      resolve(true)
    } else {
      resolve(false)
    }
  })

const validateNumber = (val) =>
	new Promise((resolve) => {
		if (!val || val >= 0) {
			resolve(true)
		} else {
			resolve(false)
		}
	})

const validateNumber1 = (val) =>
	new Promise((resolve) => {
		if (!val || val >= 1) {
			resolve(true)
		} else {
			resolve(false)
		}
	})


const echoData = reactive({
	storeyCount: 0,
	business: [
		'餐饮',
		'商店',
		'美容美发',
		'KTV',
		'网吧',
		'美甲美睫',
		'棋牌室',
		'茶社',
		'足疗、按摩',
		'教学培训',
		'医疗诊所',
		'加工生产',
		'其它',
	],
	boolean: [
		{ label: '是', value: '1' },
		{ label: '否', value: '0' }
	],
	boolean2: [
		{ label: '无问题', value: '1' },
		{ label: '有问题', value: '0' },
		{ label: '不涉及', value: '2' }
	],
	exit: [
		{ label: '是', value: '是' },
		{ label: '否', value: '否' }
	],
	haveOrNot: [
		{ label: '有', value: '1' },
		{ label: '无', value: '0' }
	],
	status1: [
		'建筑室内增设疏散楼梯',
		'建筑室外或内天井增设疏散楼梯',
		'利用相邻或相近建筑疏散',
	],
	status2: [
		'正在制定方案',
		'正在施工改造',
	],
	recharge: [
		'单插口',
		'集中充电桩',
		'单仓口',
		'充(换)电柜',
		'其他',
	]
})
const validator = computed(() => {
  return loginInfo.value?.roletype === 2 ? validator2 : validator1
})

const validator2 = {
  number1to100: [
  ],
  number1to10: [
  ],
  //第2项专用
  number2: [
  ],
  //第5项专用
  number5: [
  ],
  number1to7: [
  ],
  number: [
  ],
  number1: [
  ],
  business: [
  ],
  boolean: [
  ],
  boolean1: [
    { required: true, message: '请至少选择一项！' }
  ],
  jsrysstd: [
  ],
  image: [
    { required: true, message: '请上传图片' },
    { validator: validateImage, message: '图片数量为2-5张' }
  ],
}
const validator1 = {
  number1to100: [
    { validator: validateNumber, message: '请输入正数' },
    { validator: validateMax100, message: '最大值不能超过500' },
  ],
  number1to10: [
    { validator: validateNumber, message: '请输入正数' },
    { validator: validateMax10, message: '最大值不能超过10' },
  ],
  //第2项专用
  number2: [
    { validator: validateNumber, message: '请输入正数' },
    { validator: validateMax100, message: '最大值不能超过500' },
    { validator: validateDep1, message: '不能超过总居住人数' },
  ],
  //第5项专用
  number5: [
    { validator: validateNumber, message: '请输入正数' },
    { validator: validateMax100, message: '最大值不能超过500' },
    { validator: validateDep4, message: '不能超过总房间数' },
  ],
  number1to7: [
    { validator: validateNumber1, message: '最小值为1' },
    { validator: validateMax7, message: '最大值不能超过7' },
  ],
  number: [
    // { required: true, message: '请输入' },
    { validator: validateNumber, message: '请输入正数' }
  ],
  number1: [
    // { required: true, message: '请输入' },
    { validator: validateNumber1, message: '最小值为1' }
  ],
  business: [
    // { required: true, message: '请选择' }
  ],
  boolean: [
    { required: true, message: '请至少选择一项！' }
  ],
  boolean1: [
    { required: true, message: '请至少选择一项！' }
  ],
  jsrysstd: [
    { required: true, message: '请至少选择一项！' }
  ],
  image: [
    { required: true, message: '请上传图片' },
    { validator: validateImage, message: '图片数量为2-5张' }
  ],
}

const onBuildClick = () => {
	props.formData.sstdjsqk =
		props.formData.jsrysstd	=== '是' ? [] : ''
}


const onStoreyInput = e => {
	echoData.storeyCount = +e.target.value
}

watch(() => props.initData?.id, () => {
	echoData.storeyCount = props.initData?.data?.cs
}, { immediate: true, deep: true })

watch(() => props.formData, () => {
  if (+props.formData.cs === 1) {
    if (+props.formData.jzscmj < 200 && +props.formData.jzscxyaqcksl >= 1) {
      props.formData.jsrysstd = '是'
    } else if (+props.formData.jzscmj >= 200 && +props.formData.jzscxyaqcksl >= 2) {
      props.formData.jsrysstd = '是'
    } else {
      props.formData.jsrysstd = '否'
    }
  }
  // if (props.formData.cs > 2) {
  //   if (props.formData.jzxyssltsl >= 2 && props.formData.jzscxyaqcksl >= 2) {
  //     props.formData.jsrysstd = '是'
  //   } else {
  //     props.formData.jsrysstd = '否'
  //   }
  // }
}, { immediate: true, deep: true })

// 添加watch监听wdwhjgfjgqsyyrkrgbdj字段变化
watch(() => props.formData.wdwhjgfjgqsyyrkrgbdj, (newVal) => {
  if (newVal === '0') {
    // 当选择"否"时，清除照片数据
    props.formData.sfczjxgbczzrPhoto = []
    props.formData.sfczjxgbczzrMsg = ''
  }
})
// 疏散通道使用易燃可燃材料装修
watch(() => props.formData.sstdsyyrkrclzx, (newVal) => {
  if (newVal === '0') {
    // 当选择"否"时，清除照片/隐患描述
    props.formData.sstdsyyrkrclzxPhoto = []
    props.formData.sstdsyyrkrclzxMsg = ''
  }
})
// 供人员疏散的场院、内院、天井设置不利于烟气扩散的顶棚、雨棚等
watch(() => props.formData.gryssdcsszblyyqksddp, (newVal) => {
  if (newVal === '0') {
    // 当选择"否"时，清除照片/隐患描述
    props.formData.gryssdcsszblyyqksddpPhoto = []
    props.formData.gryssdcsszblyyqksddpMsg = ''
  }
})
// 服务于房屋的电动自行车充电设施是否按要求建设
watch(() => props.formData.fwyfwdddzxccdsssfayqjshsf, (newVal) => {
  if (newVal !== '0') {
    // 当选择"否"时，清除照片数据
    props.formData.fwyfwdddzxccdsssfayqjshsfPhoto = []
    props.formData.fwyfwdddzxccdsssfayqjshsfMsg = ''
  }
})
// 是否按标准建设疏散通道
watch(() => props.formData.jsrysstd, (newVal) => {
  if (newVal === '是') {
    // 当选择"否"时，清除照片数据
    props.formData.sfmzstdPhoto = []
    props.formData.sfmzstdMsg = ''
  }
})

</script>

<style scoped lang="less">
.base-form {
	h3 {
		margin: 24px 0 12px;
	}
}
</style>
